文本插值{{}}

最基本的數據綁定形式。將 Vue 數據值（例如 msg）當作純文本，直接插入到畫面的指定位置，使用的是“Mustache”語法(雙大括號{{}})，僅能放在元素當中的內容，並不能放在元素的屬性(id、class...等等)中。

javascript
<div>cats: {{ catCount }}</div>

以上例子，在 data 回傳的物件中定義了 catCount 這個屬性，它就會成為一個響應式數據，就可以在模板中用 {{ catCount }} 來使用它。
限制：{{}}裡面不能寫if、for迴圈或變數宣告。

v-html (有可能遭到XSS攻擊，有安全疑慮)

v-html 是一個 Vue 指令，是固定的語法。
v-html="變數名稱" 中的變數名稱，則是一個 Vue 數據 (Data Property)，可以為它取任何想要的名稱。

跟{{ }}不同，{{ }} 是純文本，v-html 是 HTML 結構。

rawHtml

當作變數使用
當作結構使用

v-bind屬性綁定(：)

當您希望 HTML 元素的「屬性值」是根據 Vue 裡的「數據」來動態改變時，不能使用雙大括號，一定要使用綁定屬性，建立數據與屬性之間的單向響應式連結。

單向響應式連結：當數據改變會影響到屬性，但當屬性改變則不會影響到數據。

可將v-bind簡寫為：

若屬性名稱與綁定的 JavaScript 值的名稱相同，那麼可以再進一步簡化語法，省略屬性值：

<!-- 與 :id="id" 相同 -->
<div :id></div>

<!-- 這也同樣有效 -->
<div v-bind:id></div>

布林屬性綁定：

在HTML中，有些屬性不需要值，只需要「存在」就能發揮作用。這類屬性就是布林屬性。
disabled存在的時候，按鈕或輸入框被禁用。
readonly存在的時候，按輸入框，只讀不做其他事情。

當在Vue中使用:disabled="myData" 的v-bind綁定disabled屬性時，Vue 會檢查 myData 的值：
值為true時，Vue會在 HTML 元素上加入這個屬性。
值為false時，Vue 會將這個屬性從 HTML 元素上移除。
Vue根據數據true/false，來決定要在最終的 HTML 中「顯示」還是「隱藏」這個屬性名稱。

v-on 事件監聽 (@)

用於監聽 DOM 事件（例如點擊、輸入）。
語法：v-on:事件名稱="方法名稱"
簡寫： @click="handleClick"
當事件發生時，執行 Vue 組件 methods 裡定義的函數。

條件渲染 (Conditional Rendering)

控制元素是否在 DOM 中存在或顯示/隱藏。

v-if

根據表達式的布林值來完全銷毀或重建元素及其子元件。當綁定的值為true，該元素會被渲染並插入到網頁的 DOM 結構中顯示。當綁定的值為false，該元素會從網頁的 DOM 結構中被移除。

v-else / v-else-if

必須跟在 v-if 或 v-else-if 之後。提供條件不成立時的替代內容。

v-show

根據表達式的布林值來切換元素顯示/隱藏。元素會一直在 DOM 中，但可透過 CSS 屬性 display: none，來切換顯示/隱藏。

v-if因為切換開銷較高。每次切換都會產生新增/移除 DOM 節點及元件實例化的成本。所以適用於低頻率切換。
v-show因為切換開銷較低。只需要修改一個 CSS 屬性。所以適用於高頻率切換。

列表渲染 (List Rendering)

用來遍歷陣列或物件，並根據數據動態渲染多個元素的核心指令。

v-for

根據數據（陣列、物件、數字）重複渲染元素。
語法為alias in expression或 (alias, index) in expression。
expression就是你目標的（陣列、物件、數字）等等。alias指給這個項目取的臨時名字，方便你在渲染時使用它的內容。Index指當前的項目alias陣列或物件當中的索引值。

:key

在使用 v-for 時，必須為每個重複的元素綁定一個獨一無二的 :key 屬性，否則在變更資料的時候，資料會跑位。

雙向綁定 (Two-Way Binding)

專為表單輸入元素設計的語法糖，將數據綁定和事件監聽結合在一起。

v-model

在表單輸入元素（、、）上創建數據的雙向綁定。數據變動會更新視圖，視圖（用戶輸入）變動也會更新數據。
v-model 其實是 :value (單向屬性綁定) 加上 @input (事件監聽) 的語法糖。